<template>
  <t-modal
    title="封样对比"
    width="1408px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="add-modal-container"
    forceRender
    v-bind="footer"
  >
    <div class="curve-modal-body">
      <div class="card">
        <div class="card-header">设计封样</div>
        <div class="card-body">
          <a-empty v-if="leftImageList.length == 0" />
          <a-row v-else :gutter="[16, 16]">
            <a-col
              :span="leftImageList.length == 1 ? 24 : 12"
              v-for="item in leftImageList"
              :key="item.dfsFileUuid"
            >
              <div
                class="image-container"
                :class="[filterClass(leftImageList)]"
              >
                <ViewerImg :toolbar="false">
                  <img :src="item.url" />
                </ViewerImg>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="vs">VS</div>
      <div class="card">
        <div class="card-header">施工封样</div>
        <div class="card-body">
          <a-empty v-if="rightImageList.length == 0" />
          <a-row v-else :gutter="[16, 16]">
            <a-col
              :span="rightImageList.length == 1 ? 24 : 12"
              v-for="item in rightImageList"
              :key="item.dfsFileUuid"
            >
              <div
                class="image-container"
                :class="[filterClass(rightImageList)]"
              >
                <ViewerImg :toolbar="false">
                  <img :src="item.url" />
                </ViewerImg>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </t-modal>
</template>

<script>
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
import { detailSealSampleManage } from "@/api/design";
export default {
  components: { ViewerImg },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      footer: { footer: null },
      //设计封样
      leftImageList: [],
      //施工封样
      rightImageList: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //详情
    getDetail() {
      return new Promise((resolve, reject) => {
        let { uuid } = this.parameter;
        detailSealSampleManage({
          uuid,
        })
          .then((res) => {
            let { data } = res;
            //设计封样
            this.leftImageList =
              JSON.parse(data?.designSampleSealing ?? "[]") || [];
            //施工封样
            this.rightImageList =
              JSON.parse(data?.constructionSealingSample ?? "[]") || [];
            resolve();
          })
          .catch((_) => {
            this.leftImageList = [];
            this.rightImageList = [];
            reject();
          });
      });
    },

    //重置表单
    resetForm() {
      this.leftImageList = [];
      this.rightImageList = [];
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    filterClass(list) {
      if (list.length == 1) {
        return "one";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 24px 32px;
    box-sizing: border-box;
    height: 584px;
    overflow: hidden;
    display: flex;
    align-items: center;
    .card {
      overflow: hidden;
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 6px;
      border: 1px solid #d9d9d9;
      .card-header {
        border-radius: 6px 6px 0px 0px;
        height: 36px;
        background: #f0f0f0;
        font-weight: 400;
        font-size: 16px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;
      }
      .card-body {
        overflow-y: auto;
        flex: 1;
        padding: 16px;
        box-sizing: border-box;
        position: relative;
        .image-container {
          height: 224px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #d9d9d9;
          div {
            height: 100%;
            width: 100%;
          }
          img {
            height: 100%;
            width: 100%;
          }
          &.one {
            height: 466px;
          }
        }
        .ant-empty {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .vs {
      margin: 0 16px;
      width: 24px;
      height: 24px;
      background: #1890ff;
      border-radius: 0px 0px 0px 0px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
